<template>
  <div>
    <Dialog
      width="750px"
      v-model="showDialog"
      title="折扣规则"
      :loading="loading"
      @confirm="confirm"
      @close="cancel"
      @open="openDialog"
    >
      <el-button class="header-button" type="primary" @click="showAddDialog = true"
        >添加折扣</el-button
      >
      <LayoutTable ref="pageRulesRef" :url="url" :param="tableForm">
        <el-table-column prop="title" label="标题" min-width="120"></el-table-column>
        <el-table-column prop="matchValue" label="折扣" min-width="120"></el-table-column>
        <el-table-column
          prop="remark"
          label="规则描述"
          show-overflow-tooltip
          min-width="120"
        ></el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <div>
              <el-button type="primary" link @click="look(scope.row)">编辑</el-button>
              <el-button type="primary" link @click="delRemoveRuleData(scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </LayoutTable>
      <template #footer>
        <el-button type="primary" :loading="loading" @click="cancel()">确认</el-button>
      </template>
    </Dialog>
    <AddDiscountRule
      :showDialog="showAddDialog"
      :businessId="tableForm.id"
      :belong="belong"
      :id="listId"
      @confirm="addConfirm"
      @cancel="addCancel"
    ></AddDiscountRule>
  </div>
</template>

<script lang="ts" setup>
import AddDiscountRule from "@/views/pointsMall/rules/addDiscountRule.vue";
import { delRemoveRule } from "@/api/pointsMall";

const props = defineProps({
  showDialog: Boolean,
  id: [String, Number],
  belong: String,
});

const { showDialog, id, belong } = toRefs(props);
const loading = ref(false),
  showAddDialog = ref(false),
  listId = ref(''),
  url = ref("");
const pageRulesRef = ref();
const tableForm = ref({
  id: "",
  belong: "", //"归属：mall//商城，mall_goods//商品，mall_product//规格"
  type: 'discount'
});
const openDialog = () => {
  // tableForm.value.id = String(id?.value)
  tableForm.value = {
    id: String(id?.value),
    belong: String(belong?.value),
    type: 'discount'
  }
  url.value = '/mall/admin/rule/pageRules'
  nextTick(()=>{
    pageRulesRef.value.search()
  })
};
const look = (row: any)=>{
  listId.value = row.id
  showAddDialog.value = true
}
const delRemoveRuleData = (row: any) => {
  ElMessageBox.confirm(`确认删除${row.title}吗？`, "删除提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    let rs: any = await delRemoveRule({ id: row.id });
    if (rs.code === 200) {
      ElMessage.success("删除成功");
      pageRulesRef.value.search();
    }
  });
};
const confirm = () => {
  emit("confirm");
  cancel();
};
const cancel = () => {
  emit("cancel", "showDiscountRule");
};

const addConfirm = () => {
  pageRulesRef.value.search();
};
const addCancel = () => {
  listId.value = ''
  showAddDialog.value = false;
};

const emit = defineEmits(["confirm", "cancel"]);
</script>
<style lang="scss" scoped>
.header-button {
  margin-bottom: 10px;
}
</style>
